<template>
  <view class="index-page">
    <!-- 顶部信息 -->
    <view class="header">
      <text class="date">{{ today }}</text>
      <view class="greeting-section">
        <text class="greeting">你好呀！</text>
        <text class="username">开始新的一天吧</text>
      </view>
      <view class="weather-section">
        <text class="weather-icon">{{ weather.icon }}</text>
        <text class="weather-info">{{ weather.temp }} {{ weather.description }}</text>
      </view>
    </view>

    <!-- 日期和待办统计 -->
    <view class="date-stats">
      <text class="date-title">{{ today }}</text>
      <text class="todo-count">今日完成：{{ doneCount }}/{{ todoList.length }}</text>
      <view class="stats-progress">
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progressWidth + '%' }"></view>
        </view>
      </view>
    </view>

    <!-- 待办列表 -->
    <view class="todo-list">
      <view v-if="todoList.length === 0" class="empty-tip">
        <text class="empty-icon">📝</text>
        <text class="empty-text">暂无待办，添加一个吧~</text>
      </view>
      <view class="todo-item-wrapper" 
        v-for="(item, index) in todoList" 
        :key="item.id || index">
        <todo-item 
          :item="item" 
          @toggleDone="toggleTodoDone(index)"
          @deleteTodo="deleteTodo(index)"
          @update="updateTodo(index)"
        />
      </view>
    </view>

    <!-- 功能按钮区 -->
    <view class="action-buttons">
      <!-- 添加待办按钮 -->
      <button class="action-btn add-btn" @click="addTodo">
        <text class="btn-icon">➕</text>
        <text class="btn-text">添加待办</text>
      </button>

      <!-- 番茄钟快捷入口 -->
      <navigator url="/pages/tomato/tomato" class="action-btn tomato-btn">
        <text class="btn-icon">🍅</text>
        <text class="btn-text">开始专注</text>
      </navigator>

      <!-- 写日记快捷入口 -->
      <navigator url="/pages/writeDiary/writeDiary" class="action-btn diary-btn">
        <text class="btn-icon">✍️</text>
        <text class="btn-text">写日记</text>
      </navigator>
    </view>
  </view>
</template>

<script>
import TodoItem from '@/components/TodoItem.vue'
import { getStorage, setStorage } from '@/utils/storage'

export default {
  components: { TodoItem },
  data() {
    return {
      today: '',
      todoList: [],
      weather: {
        icon: '🌤️',
        temp: '22°C',
        description: '晴'
      }
    }
  },
  computed: {
    doneCount() {
      return this.todoList.filter(item => item.done).length
    },
    progressWidth() {
      if (this.todoList.length === 0) return 0
      return Math.round((this.doneCount / this.todoList.length) * 100)
    }
  },
  onLoad() {
    // 初始化日期
    this.today = new Date().toLocaleDateString()
    // 读取待办数据（添加空值处理）
    this.todoList = getStorage('TODO') || []
    // 获取实时天气
    this.getWeather()
  },
  onShow() {
    // 每次页面显示都重新获取天气
    this.getWeather()
  },
  methods: {
    // 获取实时天气
    getWeather() {
      // 获取用户位置
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          // 这里使用和风天气API作为示例，实际项目中需要替换为有效的API密钥
          const { latitude, longitude } = res
          // 由于是示例，我们使用模拟数据
          // 在实际项目中，这里应该调用天气API获取实时天气
          this.weather = {
            icon: '🌤️',
            temp: `${Math.floor(Math.random() * 15) + 15}°C`,
            description: ['晴', '多云', '阴', '小雨', '中雨'][Math.floor(Math.random() * 5)]
          }
        },
        fail: (err) => {
          console.log('获取位置失败:', err)
          // 失败时使用默认天气
          uni.showToast({
            title: '无法获取位置，使用默认天气',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    // 添加待办（修复版本）
    addTodo() {
      // 使用自定义弹窗让用户输入待办内容和选择优先级
      this.showAddTodoModal()
    },
    // 显示添加待办弹窗
    showAddTodoModal() {
      // 由于uni-app没有内置的带优先级选择的弹窗，我们使用一个简单的方式
      // 先让用户输入内容，然后选择优先级
      uni.showModal({
        title: '添加待办',
        editable: true,
        placeholderText: '输入待办内容',
        success: (res) => {
          if (res.confirm && res.content && res.content.trim()) {
            const content = res.content.trim()
            // 选择优先级
            uni.showActionSheet({
              itemList: ['高', '中', '低'],
              success: (actionRes) => {
                const priorities = ['高', '中', '低']
                const priority = priorities[actionRes.tapIndex]
                
                const newTodo = {
                  content: content,
                  done: false,
                  priority: priority,
                  id: Date.now(), // 添加唯一ID便于管理
                  createTime: new Date().toISOString()
                }
                
                this.todoList.unshift(newTodo)
                // 保存到本地存储
                setStorage('TODO', this.todoList)
                
                // 显示成功提示
                uni.showToast({
                  title: '添加成功',
                  icon: 'success',
                  duration: 1500
                })
              }
            })
          } else if (res.confirm && !res.content) {
            // 用户确认但未输入内容
            uni.showToast({
              title: '请输入待办内容',
              icon: 'none',
              duration: 1500
            })
          }
        }
      })
    },
    
    // 切换待办完成状态
    toggleTodoDone(index) {
      if (this.todoList[index]) {
        this.todoList[index].done = !this.todoList[index].done
        setStorage('TODO', this.todoList)
        
        // 可选：添加状态变更提示
        const status = this.todoList[index].done ? '已完成' : '未完成'
        uni.showToast({
          title: `标记为${status}`,
          icon: 'none',
          duration: 1000
        })
      }
    },
    
    // 删除待办（添加确认提示）
    deleteTodo(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个待办事项吗？',
        success: (res) => {
          if (res.confirm) {
            this.todoList.splice(index, 1)
            setStorage('TODO', this.todoList)
            
            uni.showToast({
              title: '已删除',
              icon: 'success',
              duration: 1500
            })
          }
        }
      })
    },
    // 更新待办（用于优先级改变等）
    updateTodo(index) {
      setStorage('TODO', this.todoList)
    }
  }
}
</script>

<style scoped>
/* 全局变量 */
:root {
  --radius-base: 15rpx;
  --radius-lg: 25rpx;
  --font-sm: 24rpx;
  --font-base: 28rpx;
  --font-lg: 36rpx;
  --text-gray: #666;
}

.index-page {
  padding: 20rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

/* 顶部信息 */
.header {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.greeting-section {
  flex: 1;
}

.greeting {
  font-size: var(--font-lg);
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.username {
  font-size: var(--font-base);
  color: var(--text-gray);
  display: block;
}

.weather-section {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: rgba(102, 126, 234, 0.1);
  padding: 15rpx 25rpx;
  border-radius: var(--radius-base);
  align-self: flex-start;
}

.weather-icon {
  font-size: 40rpx;
}

.weather-info {
  font-size: var(--font-sm);
  color: #666;
  font-weight: 500;
}

/* 日期和待办统计 */
.date-stats {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 25rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.date-title {
  font-size: var(--font-lg);
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.stats-progress {
  margin-top: 15rpx;
}

.todo-count {
  font-size: var(--font-sm);
  color: var(--text-gray);
  display: block;
  margin-bottom: 10rpx;
}

.progress-bar {
  width: 100%;
  height: 10rpx;
  background: #e0e0e0;
  border-radius: 5rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #42b983, #35495e);
  border-radius: 5rpx;
  transition: width 0.3s ease;
}

/* 待办列表 */
.todo-list {
  margin-bottom: 20rpx;
}

.empty-tip {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 60rpx 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.empty-icon {
  font-size: 80rpx;
  opacity: 0.5;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: var(--font-base);
  color: var(--text-gray);
}

.todo-item-wrapper {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.todo-item-wrapper:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 功能按钮区 */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-top: 30rpx;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 30rpx 20rpx;
  border-radius: var(--radius-lg);
  font-size: var(--font-base);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: none;
  color: white;
}

.action-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.btn-icon {
  font-size: 50rpx;
  display: block;
}

.btn-text {
  font-size: var(--font-sm);
  display: block;
}

/* 添加待办按钮 */
.add-btn {
  background: linear-gradient(135deg, #42b983, #35495e);
}

/* 番茄钟按钮 */
.tomato-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

/* 写日记按钮 */
.diary-btn {
  background: linear-gradient(135deg, #feca57, #ff9ff3);
  color: white;
  grid-column: 1 / -1;
}

/* 隐藏默认的button样式 */
button {
  margin: 0;
  padding: 0;
  line-height: normal;
}
</style>